<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>课程类别管理</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/back-index.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap-paginator.js"></script>
    <script src="js/bootstrap-mypaginator.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function(){
            // 获取URL参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
            
            // 获取当前分类级别和父ID
            var parentId = getUrlParam('parentId');
            var level = getUrlParam('level');
            
            // 根据级别控制按钮显示
            if (level == 1 || level == null) {
                // 一级分类不显示返回上级按钮
                $("#back").hide();
                $("input[name='parent_id']").val('');
            } else {
                $("#back").show();
                $("input[name='parent_id']").val(parentId);
            }
            
            // 三级分类隐藏查询子类别按钮
            if (level == 3) {
                $(".course-type-detail").hide();
            }
            
            $("#doAddCourseType").on("click", function() {
		$(".modal-title").html("添加类别");
                $("#courseType-id-input").hide();
                $("#courseTypeModal").modal("show");
            });
            $(".courseType-btn").on("click", function() {
                $("#courseTypeModal").modal("hide");
            });

            $(".courseType-modify").on("click", function() {
		$(".modal-title").html("修改类别");
                var typeId = $(this).closest('tr').find('td:first').text();
                $("#courseType-id").val(typeId);
                $("#courseType-id-input").show();
                $("#courseTypeModal").modal("show");
            });

            //查询子类别
            $(".course-type-detail").on("click", function() {
                // 获取当前分类ID
                var typeId = $(this).closest('tr').find('td:first').text();
                // 跳转到子分类页面，并传递父ID和当前级别
                var currentLevel = level == null ? 1 : parseInt(level);
                window.location.href = 'back_courseTypeSet.html?parentId=' + typeId + '&level=' + (currentLevel + 1);
            });
            
            //返回父类别列表页面
            $("#back").on("click", function() {
                if (level == 2) {
                    // 如果是二级分类，返回一级分类
                    window.location.href = 'back_courseTypeSet.html?level=1';
                } else if (level == 3) {
                    // 如果是三级分类，返回二级分类
                    // 获取父级分类的ID
                    $.ajax({
                        url: '/boot/courseType/findById',
                        type: 'get',
                        data: {id: parentId},
                        dataType: 'json',
                        success: function(result) {
                            if (result.responseCode == '2001' && result.returnObject) {
                                // 获取祖父分类的ID作为父ID
                                var grandParentId = result.returnObject.parentId;
                                window.location.href = 'back_courseTypeSet.html?parentId=' + grandParentId + '&level=2';
                            }
                        }
                    });
                }
            });
            
            // 初始化加载分类数据
            function loadCourseTypes() {
                $.ajax({
                    url: '/boot/courseType/showCourseType',
                    type: 'get',
                    data: {parentId: parentId, level: level},
                    dataType: 'json',
                    success: function(result) {
                        if (result.responseCode == '2001' && result.returnObject && result.returnObject.typeList) {
                            var returnData = result.returnObject;
                            var typeList = returnData.typeList;
                            var tbody = $("#tb");
                            tbody.empty();
                            
                            if (typeList.length > 0) {
                                $.each(typeList, function(index, type) {
                                    var statusText = type.status == 0 ? '启用' : '禁用';
                                    var statusBtnClass = type.status == 0 ? 'btn-danger' : 'btn-success';
                                    var statusBtnText = type.status == 0 ? '禁用' : '启用';
                                    
                                    var tr = $('<tr></tr>');
                                    tr.append('<td>' + type.id + '</td>');
                                    tr.append('<td>' + type.typeName + '</td>');
                                    tr.append('<td>' + statusText + '</td>');
                                    
                                    var operationTd = $('<td></td>');
                                    operationTd.append('<input type="button" class="btn btn-warning btn-sm courseType-modify" value="修改" />');
                                    operationTd.append(' ');
                                    operationTd.append('<input type="button" class="btn ' + statusBtnClass + ' btn-sm courseType-status" data-id="' + type.id + '" data-status="' + type.status + '" value="' + statusBtnText + '" />');
                                    
                                    // 只有一级和二级分类显示查询子类别按钮
                                    if (returnData.currentLevel != 3) {
                                        operationTd.append(' ');
                                        operationTd.append('<input type="button" class="btn btn-success btn-sm course-type-detail" value="查询子类别" />');
                                    }
                                    
                                    tr.append(operationTd);
                                    tbody.append(tr);
                                });
                            } else {
                                var tr = $('<tr><td colspan="4" style="text-align: center;">暂无数据</td></tr>');
                                tbody.append(tr);
                            }
                        }
                    }
                });
            }
            
            // 当页面加载时自动执行
            loadCourseTypes();

            // 禁用/启用类别
            $(document).on('click', '.courseType-status', function() {
                var id = $(this).attr('data-id');
                var status = $(this).attr('data-status');
                var newStatus = status == 0 ? 1 : 0;
                
                $.ajax({
                    url: '/boot/courseType/modifyStatus',
                    type: 'get',
                    data: {id: id, status: newStatus},
                    dataType: 'json',
                    success: function(result) {
                        if (result.responseCode == '2001') {
                            alert('操作成功');
                            loadCourseTypes();
                        } else {
                            alert('操作失败：' + result.message);
                        }
                    }
                });
            });

            //按钮的超链接设置函数
    //      myoptions.pageUrl = function(type, page, current) {
    //          return "${pageContext.request.contextPath }/findAll.do?pageNo="
    //                  + page;
    //      };
            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function(event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
            };

            //分页,在bootstrap-mypaginator.js中
            myPaginatorFun("myPages", 1, 5);
            
        });

    </script>


</head>

<body>

    <!-- 课程类别管理 -->
    <div class="panel panel-default" id="departmentSet">
        <div class="panel-heading">
            <h3 class="panel-title">课程类别管理</h3>
        </div>
        <div class="panel-body">
            <input type="button" value="添加课程类别" class="btn btn-primary" id="doAddCourseType" />
            <!-- courseType父类别id,没有时,移除此按钮 -->
            <input type="hidden" name="parent_id" value=""  />
            <input type="button" value="返回上级列表" class="btn btn-success" id="back" style="float: right; display: none;" />
            <br>
            <br>
            <div class="modal fade" tabindex="-1" id="courseTypeModal">
                <!-- 窗口声明 -->
                <div class="modal-dialog modal-lg">
                    <!-- 内容声明 -->
                    <div class="modal-content">
                        <!-- 头部、主体、脚注 -->
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">添加类别</h4>
                        </div>
                        <div class="modal-body text-center">
                            <div class="row text-right" id="courseType-id-input" >
                                <label for="courseType-id" class="col-sm-4 control-label">编号：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="courseType-id" readonly="true" />
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="courseType-name" class="col-sm-4 control-label">类别名称：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="courseType-name" />
                                </div>
                            </div>
                            <br>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary courseType-btn">确定</button>
                            <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="show-list">
                <table class="table table-bordered table-hover" style='text-align: center;'>
                    <thead>
                        <tr class="text-danger">
                            <th class="text-center">编号</th>
                            <th class="text-center">名称</th>
                            <th class="text-center">状态</th>
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tb">
                        <tr>
                            <td>1</td>
                            <td>Java</td>
                            <td>启用</td>
                            <td>
                                <input type="button" class="btn btn-warning btn-sm courseType-modify" value="修改" />
                                <input type="button" class="btn btn-danger btn-sm" value="禁用" />
                                <input type="button" class="btn btn-success btn-sm course-type-detail" value="查询子类别" />
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>IOS</td>
                            <td>禁用</td>
                            <td>
                                <input type="button" class="btn btn-warning btn-sm courseType-modify" value="修改" />
                                <input type="button" class="btn btn-success btn-sm" value="启用" />
                                <input type="button" class="btn btn-success btn-sm course-type-detail" value="查询子类别" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div style="text-align: center;" >
                <ul id="myPages" ></ul>
            </div>
        </div>
    </div>
</body>

</html>